<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<style type="text/css">
			.active {
				width: 200px;
				height: 200px;
				background-color: orange;
				margin-top: 2px;
			}

			.text-danger {
				color: green;
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<!-- 
		   属性:
		   1.固有属性
		    1.1样式
			  class
			  style
		    1.2一般
		   2.自定义属性(data-)
		 -->
		<div id="app">
			<a href="https://www.atstudy.com">学掌门</a>
			<a v-bind:href="url">博为峰</a>
			<div class="active">对象语法</div>
			<div v-bind:class="{active:isActive,'text-danger':hasError}">对象语法</div>
			<div class="active text-danger">数组语法</div>
			<div v-bind:class="[activeClass,errorClass]">数组语法</div>
			<div :style="{color:color,'font-size':fontSize}">style</div>

			<div :id="id">自定义属性</div>
		</div>
		<script type="text/javascript">
			const app = new Vue({
				el: '#app',
				data: {
					url: 'https://www.boweifeng.com',
					isActive: true,
					hasError: true,
					activeClass: 'active',
					errorClass: 'text-danger',
					color: 'gold',
					fontSize: '20px',
					id: 9
				}
			})
		</script>
	</body>
</html>
